<template>
    <Table :columns="columns" :data="value">
        <template slot-scope="{ row, index }" slot="code">
            {{row.product.code}}
        </template>
        <template slot-scope="{ row, index }" slot="title">
            {{row.product.title}}
        </template>
        <template slot-scope="{ row, index }" slot="quantity">
            <span>{{row.quantity.toLocaleString()}}</span>
        </template>
        <template slot-scope="{ row, index }" slot="price">
            <span> {{row.price.toLocaleString()}}</span>
        </template>
        <template slot-scope="{ row, index }" slot="to_price">
            <span> {{(row.price * row.quantity).toLocaleString()}}</span>
        </template>
    </Table>
</template>

<script>
    export default {
        name: "products",
        props: {
            value: {
                type: Array,
                default: () => []
            }
        },
        data(){
            return {
                columns: [{
                    title: '序号',
                    width: 80,
                    render: (h, {row, column, index}) => {
                        return h('div', index + 1);
                    }
                }, {
                    title: '产品代码',
                    slot: 'code'
                },{
                    title: '产品名称',
                    slot: 'title'
                },{
                    title: '数量',
                    slot: 'quantity'
                },{
                    title: '价格',
                    slot: 'price'
                },{
                    title: '总价',
                    slot: 'to_price'
                }]
            }
        }
    }
</script>

<style scoped>

</style>
